<template>
    <div calss="menu-box">
      
      <h3 class="title" >
        <span><el-icon size="30" style="text-align: center;"><ElementPlus /></el-icon></span>
        <span  v-if="!collapse">家格后台管理系统</span>
        </h3>
      <!-- 引入菜单menu组件 -->
      <!-- 想要点击菜单栏的时候跳转二级路由 
        1.现在首页配置二级路由出口 
        2.在路由里配置二级路由
        3.在左侧菜单组件中 把router属性加上 就能实现二级路由跳转
      -->
      <!-- :default-active="currentPath" 默认刷新后显示地址 -->
      <!-- @select 点击的时候可以拿到当前点击的地址栏路径数据  他有一个参数 参数就是当前点击的路径 -->
      <el-menu
        active-text-color="#ffd04b"
        background-color="#000"
        class="el-menu-vertical-demo"
        :default-active="currentPath"
        text-color="#fff"
        router
        mode=vertical	
        :collapse="collapse"
        @select="selectMenu"
     
      >
      <!-- 在这里遍历数组 -->
      <template v-for="item in menus">
        <!-- 拥有二级菜单的 -->
        <el-sub-menu v-if="item.children" :index="item.path">

          <template #title>
            <el-icon>
            <component :is="item.icon"></component>
        </el-icon>
           
            <span>{{ item.title }}</span>
          </template>
            <el-menu-item v-for="child in item.children" :index="child.path">
              <span>
                {{ child.title }}
              </span>
            </el-menu-item>
           
        </el-sub-menu>
        <!-- 只有一级菜单的 -->
    
        <el-menu-item v-else :index="item.path">
          <el-icon>
            <component :is="item.icon"></component>
        </el-icon>
          <span>{{ item.title }}</span>
          
      </el-menu-item>
      
      </template>
   





      <!-- <el-menu-item index="/">
        <el-icon><HomeFilled /></el-icon>
        <span>首页</span> 
      </el-menu-item>
        <el-sub-menu index="/banner">
          <template #title>
            <el-icon><Avatar /></el-icon>
            <span>轮播图管理</span>
          </template>
            <el-menu-item index="/banner/bannerlist">轮播图列表</el-menu-item>
            <el-menu-item index="/banner/addbanner">添加轮播图</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="/goods">
          <template #title>
            <el-icon><ShoppingBag /></el-icon>
            <span>产品管理</span>
          </template>
            <el-menu-item index="/goods/goodslist">产品列表</el-menu-item>
            <el-menu-item index="/goods/seckilllist">秒杀列表</el-menu-item>
            <el-menu-item index="/goods/recommendlist">推荐列表</el-menu-item>
            <el-menu-item index="/goods/searchgoods">筛选列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon><location /></el-icon>
            <span>账号管理</span>
          </template>
            <el-menu-item index="/account/accountlist">管理员列表</el-menu-item>
          
        </el-sub-menu> -->
    
       
      </el-menu>
    </div>
</template>

<script>
import { mapState } from "vuex";
  import{getMenu} from '@/router/routers.js'
    export default {
       data(){
        return{
          currentPath : sessionStorage.getItem('routePath') ||'/',
          menus:[],
          // selectMenu:''
        }
       },
      // 当点击刷新的时候 左侧的菜单栏会自己合并 所以就可以用监听 来监听地址栏的变化
       watch:{
        '$route.path'(){
          // console.log(this.$route.path);
          this.currentPath=this.$route.path
          // 再把拿到的路由地址存起来
          sessionStorage.setItem('routePath',this.currentPath)
        },
     
       },
       computed: {
    ...mapState(["collapse"]),
  },
       created(){
        let login = localStorage.getItem('login')
        if(login){
          login = JSON.parse(login)
          this.menus = getMenu(login.checkedkeys,login.adminname)
        }  
       },
       methods:{
        selectMenu(path){
          // console.log(val);
          // breadcrumb数据用于存储面包屑每层的数据信息
          let breadcrumb = []
          // 在点击菜单的时候，可以获取到当前的path路径
          // 同时也可以获取到菜单对应的那个数组数据（this.menus当前整个菜单）
          this.menus.forEach((item) => {
        // 下面判断成立，说明只有一级菜单
        if (item.path == path) {
          breadcrumb.push({
            path: item.path,
            title: item.title,
          });
        }
        // 当前遍历出来的item中包含有二级菜单，需要遍历二级菜单，
        // 判断二级菜单的path与当前点击时获取到的path是否一致
        if (item.children) {
          item.children.forEach((child) => {
            // 当前的某个二级菜单就是点击时的二级菜单
            if (child.path == path) {
              // 需要先存储二级菜单对应的一级菜单
              breadcrumb.push({
                path: item.path,
                title: item.title,
              });
              // 再存储当前对应的二级菜单
              breadcrumb.push({
                path: child.path,
                title: child.title,
              });
            }
          });
        }
      });
      // 因为是父子关系 所以可以通过子传父 或者vuex
      this.$emit("getBrand", breadcrumb);
        }
       }
    }
</script>

<style lang="less" scoped>
.menu-box {
    width: 100%;
    height: 100%;
 
}
.title{
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: #fff;
    }
</style>